import { FlexAlign } from '../layout/flex-box-store'
import { Space } from '../layout/Space'

export const textDefaultProps = {
  fontSize: 16,
  lineHeight: 1.5,
  align: FlexAlign.center
}
export type TextProps = {
  label: string
  space?: number
  align?: FlexAlign
  color?: string
  fontSize?: number
  lineHeight?: number
}
export function Text(props: TextProps) {
  const p = { ...textDefaultProps, ...props }

  return (
    <Space value={props.space || p.fontSize * p.lineHeight}>
      <div
        style={{
          color: props.color,
          fontSize: props.fontSize,
          lineHeight: p.lineHeight,
          textAlign:
            p.align === FlexAlign.center ? 'center' : p.align === FlexAlign.start ? 'left' : 'right'
        }}
      >
        {props.label}
      </div>
    </Space>
  )
}
